<template>
  <div class='aa-pop'>
    <div class="fg-carInfoBox" v-if="carInfoData!=null">
      <div class="fg-carInfoBox-view">
        <div class='dtbox'>
          <img :src="carInfoData.autoBrandLogo" alt="">
        </div>
        <div class='ddbox'>
          <div class="gs-carInfoBox">{{auto_text}}</div>
          <div class="vinCoda">
            <span>{{vin_text}}</span>
          </div>
        </div>
      </div>
    </div>

    <FrequencyLimitPayment v-if="needPurchaseStatus == 1" :imUserCode="cangpei_param_ucd" @paySuccess="paySuccess" :set_price="PurchaseShopVipObj.set_price">
    </FrequencyLimitPayment>

    <div v-if="needPurchaseStatus == -1" class='aa-popBox'>
      <div class='aa-popCenter clearfix'>
        <div class="li" :class="!item.isEnable?'gd-disable':''" v-for="(item, index) in getCategorysList" :key="index">
          <span class='title'>{{item.smallName}}</span>
          <template v-if="item.viewType==1">
            <span class='nodata' v-if="item.fourPrice==0">暂无</span>
            <span class='nodata' v-if="item.fourPrice>0">¥{{item.fourPrice}}</span>
          </template>
          <template v-if="item.viewType==2 ||item.viewType==3">
            <div>
              <span class="lusir-common_cursor" @click='seePrice(item)'>查看价格</span>
            </div>
          </template>
        </div>
      </div>
      <div class="cang_dialog" id="cang_dialog" v-if="isShowPriceDialog" :style="{'left': myLeft, 'top': myTop}">
        <div class="header">
          <div class="title">
            请精确删选车型参数
          </div>
          <div class="right">
            <img src="../assets/images/button_close.png" alt="">
          </div>
        </div>
        <div class="main">
          <div class="first">
            <div class="left">
              发动机技术
            </div>
            <div class="right">
              <div class="item">
                <img class="myImgs" src="../assets/images/xuanzhong.png" v-if="isXuanzhong" alt="">
                <img class="myImgs" src="../assets/images/xuanzhong-fail.png" v-if="!isXuanzhong" alt="">
                原车有启停技术
                <img style="margin-left: 10px;" class="myImgs" src="../assets/images/picture1.png" alt="">
              </div>
              <div class="item">
                <img class="myImgs" src="../assets/images/xuanzhong.png" v-if="isXuanzhong" alt="">
                <img class="myImgs" src="../assets/images/xuanzhong-fail.png" v-if="!isXuanzhong" alt="">
                原车有启停技术
                <img style="margin-left: 10px;" class="myImgs" src="../assets/images/picture1.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="left">
            电瓶
          </div>
          <div class="right">
            6390.00/只
          </div>
        </div>

      </div>
    </div>

    <!-- 查看4s店价格参数 -->
    <accessoryparameters ref="accessoryparameters_instance" :vin="param_vin" :subid="param_subid" />
  </div>

</template>

<script>
import { mapState, mapGetters } from "vuex";
import accessoryparameters from '@/components/accessoryparameters';
import FrequencyLimitPayment from '@/components/FrequencyLimitPayment';
export default {
  name: '',
  data() {
    return {
      param_vin: this.$com_util.getQueryString("vin"), //VIN码
      param_subid: this.$com_util.getQueryString("subid"), //VIN码
      carInfoData: null, //车型信息
      auto_text: "", //车型展示文案
      vin_text: "", //VIN码展示文案
      getCategorysList: [], //选择配件列表
      accessoryparameters_instance: null, //组件实例
      myLeft: "",
      myTop: "",
      isXuanzhong: false, // 是否选中

      needPurchaseStatus: 0,
      PurchaseShopVipObj: {
        needPurchase: false, // 是否需要购买云店VIP
        imConsultantName: "", // 客服名称
        set_price: "" // 查询费
      },
      cachekey: ""
    }
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  created() {
    console.log('location', location);

    // this.param_vin = "LVSHCAMEXFF391060"; // LVSHCAMEXFF391060 // 伪代码

    if (this.cangpei_param_ccd) {
      this.NeedPurchaseShopVip();
    } else {
      this.needPurchaseStatus = -1;
    }

    this.getVinParamByVin();
    this.getAutoCategoryByVin();
  },
  methods: {
    // 构造分享代付云店VIP的缓存
    async BuildReplacePayShopVipCache() {
      const res = await this.$imServive({
        url: "/IMUser/BuildReplacePayShopVipCache",
        data: {
          imConsultantCode: this.cangpei_param_ccd
        },
      });
      this.cachekey = res.cachekey;
    },
    // 是否需要购买云店VIP
    async NeedPurchaseShopVip() {
      const res = await this.$imServive({
        url: "/IMUser/NeedPurchaseShopVip",
        data: {
          imConsultantCode: this.cangpei_param_ccd
        },
      });
      this.PurchaseShopVipObj.needPurchase = res.needPurchase;
      this.PurchaseShopVipObj.imConsultantName = res.imConsultantName;
      this.PurchaseShopVipObj.set_price = res.set_price;

      if (this.PurchaseShopVipObj.needPurchase) {
        this.needPurchaseStatus = 1;
        this.BuildReplacePayShopVipCache();
      } else {
        this.needPurchaseStatus = -1;
      }
    },
    paySuccess() {
      this.NeedPurchaseShopVip();
    },
    //获取精友参数
    async getVinParamByVin() {
      const res = await this.$imServive({
        url: "/Auto/GetJYAutoByVin",
        data: {
          vinCode: this.param_vin,
          autoSubId: this.param_subid
        },
      });
      if (res.length > 0) {
        this.carInfoData = res[0].VinAutoBase;
      } else {
        this.carInfoData = {};
      }
      this.auto_text = this.build_autoText();
      this.vin_text = this.build_vinText();
    },
    //VIN码文案
    build_vinText() {
      return this.param_vin;
    },
    //车型文案
    build_autoText() {
      if (this.param_vin) {
        //VIN码请求模式
        if (this.carInfoData) {
          return (
            this.carInfoData.autoBrandName +
            " " +
            this.carInfoData.autoModelName
          );
        } else {
          return "";
        }
      } else {
        //车型请求模式
        if (this.carInfoData) {
          return (
            this.carInfoData.autoBrandName +
            " " +
            this.carInfoData.autoModelName +
            " " +
            this.carInfoData.autoModelSubName
          );
        } else {
          return "";
        }
      }
    },
    async getAutoCategoryByVin() {
      const res = await this.$appServive({
        url: "/Order/GetAutoCategoryByVin",
        isShowLoading: true,
        data: {
          vinCode: this.param_vin,
          autoSubId: this.param_subid
        },
      });
      this.getCategorysList = res.autoCatetory;
    },
    //查看价格
    seePrice(priceInfo) {
      if (priceInfo.viewType == 2) {
        this.GetAutoParam(priceInfo);
      } else {
        this.SeePartsFourPrice(priceInfo);
      }
    },
    async GetAutoParam(priceInfo) {
      const res = await this.$appServive({
        url: "/Order/GetCategoryParams",
        data: {
          vinCode: this.param_vin,
          autoSubId: this.param_subid,
          categoryId: priceInfo.categoryId
        },
      });
      if (res) {
        this.$refs.accessoryparameters_instance.showPopup();
        this.$refs.accessoryparameters_instance.setValue(
          res,
          2,
          priceInfo
        );
      }
    },
    // 查看价格列表
    async SeePartsFourPrice(priceInfo) {
      const res = await this.$imServive({
        url: "/Auto/SeePartsFourPrice",
        data: {
          vinCode: this.param_vin,
          autoSubId: this.param_subid,
          userParam: [],
          categoryId: priceInfo.categoryId
        },
      });
      if (res) {
        this.$refs.accessoryparameters_instance.showPopup();
        this.$refs.accessoryparameters_instance.setValue(
          res,
          3,
          priceInfo
        );
      }
    }
  },
  components: {
    accessoryparameters,
    FrequencyLimitPayment,
  }
}
</script>

<style scoped>
.aa-pop {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
/* 顶部一层车型logo */
.fg-carInfoBox {
  padding: 0.32rem;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}
.fg-carInfoBox-view {
  width: auto;
  height: 1.28rem;
  padding: 0.26666666666666666rem 0.28rem;
  background: #f6f6f6;
  display: flex;
  align-items: center;
}
.fg-carInfoBox-view .dtbox {
  width: 1.0666666666666667rem;
  height: 1.0666666666666667rem;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.fg-carInfoBox .dtbox img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.fg-carInfoBox .ddbox {
  height: 100%;
  margin-left: 0.24rem;
  flex: 1;
}
.fg-carInfoBox .ddbox .gs-carInfoBox {
  width: 100%;
  height: auto;
  font-size: 0.36rem;
  line-height: 0.64rem;
  color: #282828;
}
.fg-carInfoBox .ddbox .vinCoda {
  width: auto;
  font-size: 0.32rem;
  color: #666;
  display: flex;
  align-items: center;
}
.fg-carInfoBox .ddbox .vinCoda > span {
  font-size: 0.32rem;
  font-weight: normal;
  text-align: left;
  color: #666;
}
/* 顶部一层车型logo */
.aa-popBox {
  width: 100%;
  height: calc(100vh - 2.46rem);
  overflow-x: hidden;
  overflow-y: scroll;
  border-radius: 0.21rem;
}
.aa-popCenter {
  width: 100%;
  height: 100%;
  padding: 0 0.32rem;
  box-sizing: border-box;
}
/* 查看4s店价格 */
.aa-popCenter .li {
  width: 23.125%;
  height: 1.4rem;
  border: 1px solid #e8e8e8;
  padding: 0.12rem 0;
  border-radius: 0.08rem;
  margin-bottom: 0.26666666666666666rem;
  margin-right: 2.5%;
  float: left;
  clear: none;
  box-sizing: border-box;
}
.aa-popCenter .li:nth-child(4n) {
  margin-right: 0;
}
.aa-popCenter .gd-disable {
  border: 1px solid #e8e8e8;
  background: #f6f6f6;
}
.aa-popCenter > div .gd-disable > text.title {
  color: #bcbcbc;
  line-height: 1.2rem;
}
.aa-popCenter .gd-disable > text.nodata {
  display: none;
}
.aa-popCenter .li .title {
  width: 100%;
  font-size: 0.32rem;
  line-height: 0.6rem;
  text-align: center;
  color: #282828;
  float: left;
  clear: left;
  color: #a4a4a4;
}
.aa-popCenter .li > span {
  width: 100%;
  font-size: 0.32rem;
  line-height: 0.6rem;
  text-align: center;
  color: #e74c3c;
  float: left;
  clear: left;
}
.aa-popCenter .li > div > span {
  width: 100%;
  font-size: 0.32rem;
  line-height: 0.6rem;
  text-align: center;
  color: #377de8;
  float: left;
  clear: left;
}
.cang_dialog {
  position: absolute;
  left: 0;
  top: 0;
  width: 9.36rem;
  min-height: 1.3333333333333333rem;
  background: #fff;
  overflow: hidden;
  padding: 0.26666666666666666rem 0.26666666666666666rem 0
    0.26666666666666666rem;
  box-shadow: rgba(0, 0, 0, 0.15) 0rem 0rem 0.29333333333333333rem 0rem;
  box-sizing: border-box;
}
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 0.5866666666666667rem;
}
.header .title {
  color: #3a3a3a;
}
.header img {
  width: 0.4rem;
  height: 0.4rem;
}
.first {
  display: flex;
}
.main {
  padding: 0.26666666666666666rem 0;
}
.main .left {
  font-size: 0.37333333333333335rem;
  margin-right: 0.13333333333333333rem;
}
.main .right .item {
  font-size: 0.37333333333333335rem;
  display: flex;
  align-items: center;
  height: 0.4266666666666667rem;
  margin-bottom: 0.21rem;
}
.footer {
  width: 100%;
  display: flex;
  height: 1.3333333333333333rem;
  line-height: 1.3333333333333333rem;
  border-top: 0.02666666666666667rem solid #eee;
  justify-content: space-between;
}
.myImgs {
  width: 0.48rem;
  height: 0.48rem;
  margin-right: 0.13333333333333333rem;
}
</style>